<template>
    <div>
        <blogHead></blogHead>
        <section class="main floatfix">
        <!-- 公用侧边栏 -->
            <blogAside></blogAside>
            <section class="main-articles">
                <ul v-for="(item, index) in articles">
                    <li class="main-articles-item">
                        <!-- <h2><a href="/articles/<%= articles[i].articleID %>">{{ item.articleTitle }}</a></h2> -->
                        <h2><a href="http://localhost:8080/#/articles/1">{{ item.articleTitle }}</a></h2>
                        
                        <section class="main-articles-items-des">
                            <p>
                            <span>作者：{{ item.articleAuthor }}</span>
                            <span>发布时间：{{ item.articleTime }}</span>
                            <span>浏览量：{{ item.articleClick }}</span>
                            <!-- <% if(user){ %> -->
                                <span class="delete"><a href="/delete/<%= articles[i].articleID %>">删除</a></span>
                                <span class="modify"><a href="/modify/<%= articles[i].articleID %>">编辑</a></span>
                            <!-- <% } %> -->
                            </p>
                        </section>
                    </li>
                </ul>
                <!-- 分页 -->
                <!-- <% if(pageNum > 1){ %>
                <section class="page">
                    <% for(let i=1; i<pageNum+1; i++) { %>
                    <span <% if(i == page) { %> class="active" <% } %> > <a href="/?page=<%= i %>"><%= i %></a> </span>
                    <% } %>
                </section>
                <% } %> -->
            </section>
        </section>
    </div>
</template>

<script>
import blogHead from './pub/head.vue'
import blogAside from './pub/aside.vue'
import '@/assets/css/blog.css'
import qs from 'qs'
import axios from '@/assets/api/axios'


export default {
    name: 'blogHome',
    data() {
        return {
            articles: []
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData: function() {
            axios({
                method: 'get',
                url: '/blog/article',
                data: qs.stringify({

                })
            }).then(res => {
                // console.log(res.data);
                this.articles = res.data;
                // console.log(this.articles);
            }).catch((err) => {
                console.log(err);
            });
        }
    },
    components: {
        blogHead,
        blogAside
    }
}
</script>

<style scoped>

</style>
